// 1、加载路由模块
//      vue 的路由模块在ES模块语法中未提供默认导出功能 ; 但会单独导出路由创建方法 createRouter
import { createRouter,createWebHashHistory } from "vue-router";
// import { createRouter,createWebHistory } from "vue-router";

import routes from "./routes.js";
// 2、创建路由并定义路由配置
//      基于 createRouter(otpions) 创建路由对象
//              otpions 为必传配置选项，其中 options.history options.routes 也为必传选项
let router = createRouter({
    // history 路由模式选择 【 hash模式，history模式 】
    // import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";
    //        createWebHashHistory  ==> 创建hash路由模式  ==> 在地址栏补充 锚点关键字 #
    //        createWebHistory  ==> 创建 history路由模式
    history:createWebHashHistory( process.env.BASE_URL ),
    // history:createWebHistory( process.env.BASE_URL ),

    // linkActiveClass:"router-link-active",
    linkActiveClass:"active",
    // linkExactActiveClass:"router-link-exact-active",
    linkExactActiveClass:"exact-active",

    // 历史模式的路由滚动行为控制
    scrollBehavior(to, from, savedPosition){
        console.log("当前正在访问的路由地址：",from);
        console.log("将要访问的路由地址：",to);
        console.log("浏览器操作前进后台按钮后记录的页面位置:",savedPosition);
        // 通过return { top:数值,left:数值 } 方式让浏览器完成滚动条位置重置(调用了window.scroll)
        // window.scroll(0,0)
        // return { top:0,left:0 }

        // 判断是否是浏览器前进后退按钮的操作
        if(savedPosition){
            // 如果是,前进后退的页面会重新从离开时的滚动条位置进行展示
            return savedPosition;
        }else if( to.matched.length==1 ){
            // 如果不是,直接重置浏览器滚动条
            return { top:0,left:0 }
        }
    },

    // 路由表 ==> 地址和组件的对应关系
    routes:routes
});


// 
// 为路由表中每个路由都增加进入前守卫
router.beforeEach(function(to,from){
    console.group("全局进入守卫")
    console.log("to:",to)
    console.log("from:",from)
    console.log("this:",this)
    console.groupEnd();
    // return false;
    // return "/default"
    // 全局守卫的功拦截必须由相关拦截逻辑
    // if(to.path=="/ajax"){
    //     return false
    // }
})

// 为路由表中每个路由都增加进入前解析守卫
// router.beforeResolve(function(to,from){
//     console.group("全局解析守卫")
//     console.log("to:",to)
//     console.log("from:",from)
//     console.log("this:",this)
//     console.groupEnd();
// })

// 为路由表中每个路由都增加离开前守卫
// 全局离开守卫没有拦截功能
// router.afterEach(function(to,from){
//     console.group("全局离开守卫")
//     console.log("to:",to)
//     console.log("from:",from)
//     console.log("this:",this)
//     console.groupEnd();
//     // return false;
// })


// 3、导出路由对象
export default router;

// 4、main.js 中加载插件